
body{
    margin: 0px;
    width:100vw;
    height:100vh;
    background-image: url(../img/numberone.jpg);
    background-size: 100vw 100vh;
    display: fixed;
    bottom: 0px;
    left: 0px;
    box-sizing: border;
}
#gamename{
    width:10vw;
    height: 50vh;
    font-size: 25px;
    padding: 15vh 40vw 0 50vw;
    transform-origin: 0% 0%;
    animation: run 3.5s linear ;
    opacity: 1;
    color:red;
}
@-moz-keyframes run{
    from{ 
        opacity: 0;
        transform:rotatex(90deg);
            color:black;
        
        
    }
    to{
         opacity: 1;
         transform:rotatex(0deg);
         color:red;
    }
}
#entergame{
width:100vw;
    height:10vh;
    line-height: 10vh;
}
#entergame>a{
    display: block;
    width:25vw;
    height:8vh;
   }
#entergame>a:active{
     position:relative;
    animation: move 1s linear;
}
@-moz-keyframes move{
    from{  }
    to{transform:translate(100vw,0);}
 
}
#entergame>a>span{
  
    animation: changecolor 4s linear infinite;
}
@-moz-keyframes changecolor{
    16.5%{

        color: red;
    }
    33%{
        color:orange;
    }
    49.5%{
        color:yellow;
    }
    66%{
        color:green;
    }
    83.5%{
        color:blue;
    }
    100%{
        color:indigo;
    }
}
#entergame>a>span{
    display: inline-block;
    font-weight: bold;
    width:25vw;
    height:8vh;
    line-height: 8vh;
    text-align: center;
    border-radius: 5px;
    position:relative;
}
